<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>用户列表</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../static/css/style.css" th:href="@{/css/style.css}"/>
  <script>
    function confirmDelete(element) {
      var userId = element.getAttribute("data-user-id");
      if (confirm('确定要删除该用户吗？')) {
        window.location.href = '/users/delete/' + userId;
      }
    }
  </script>
</head>
<body>
<div th:replace="~{common/layout :: header}"></div>
<div th:replace="~{common/layout :: sidebar}"></div>
<div class="container mt-5">
  <h1 class="mb-4">用户列表</h1>
  <a href="/users/add" class="btn btn-primary mb-3">添加新用户</a>
  <hr>
  <table class="table table-bordered">
    <thead class="thead-dark">
    <tr>
      <th>用户手机号</th>
      <th>用户姓名</th>
      <th>用户性别</th>
      <th>用户生日</th>
      <th>用户类型</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="user : ${users}">
      <td th:text="${user.userId}"></td>
      <td th:text="${user.realName}"></td>
      <td th:text="${user.sex == 1 ? '男' : '女'}"></td>
      <td th:text="${user.birthday}"></td>
      <td th:text="${user.userType == 1 ? '普通' : (user.userType == 2 ? '内部员工' : '其它')}"></td>
      <td>
        <a th:href="@{/users/view/{userId}(userId=${user.userId})}" class="btn btn-info btn-sm">详情</a>
        <a th:href="@{/users/edit/{userId}(userId=${user.userId})}" class="btn btn-warning btn-sm">编辑</a>
        <button class="btn btn-danger btn-sm" th:data-user-id="${user.userId}" onclick="confirmDelete(this);">删除</button>
      </td>
    </tr>
    </tbody>
  </table>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
